<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>tab</title>
    <style type="text/css">
        /* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */
        *{
            margin:0;
            padding:0;
        }
        /* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */
        .box{
            width:50vw;
            height:50vh;
            margin:0 auto;
        }
        /* 清除li样式 */
        ul,li{
            list-style: none;
        }
        /* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 */
        /* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */
        ul{
            position:relative;
            display:flex;
        }
        /* 将三个li宽度平分，高度60px */
        li{
            flex:1;
            height:60px;
        }
        /* input隐藏 */
        /* input{
             display:none;
         } */
        /* 设置input的下一个节点label的样式 */
        /* input+label{
            display:block;
            width:100%;
            height:100%;
            background:#ccc;
            font-size:18px;
            text-align: center;
            line-height: 60px;
            color:#333;
        } */
        /* 设置div内容的基础样式 隐藏内容div*/
        input+label+div{
            display:none;
            position: absolute;
            left:0;
            top:60px;
        }
        /* input选中状态时候对应的label的样式 */
        input:checked+label{
            background: #333333;
            color:#fff;
        }
        /* input选中时候显示对应的div */
        input:checked+label+div{
            display:block;
        }
    </style>
</head>
<body>

<div class="box">
    <ul>
        <li>
            <input type="radio" name="check" id="active1" checked><label for="active1">第一页</label>
            <div>道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗</div>
        </li>
        <li>
            <input type="radio" name="check" id="active2"><label for="active2">第二页</label>
            <div>难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖</div>
        </li>
        <li>
            <input type="radio" name="check" id="active3"><label for="active3">第三页</label>
            <div>诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。</div>
        </li>
    </ul>
</div>
</body>
</html>
